<!--文章详情-->
<template>
  <div class="news-box">
    <div class="w1200">
      <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ name: breadcrumbVal.url }">大数据商城</el-breadcrumb-item>
        <el-breadcrumb-item>{{breadcrumbVal.name}}</el-breadcrumb-item>
      </el-breadcrumb>


      <div class="details-box">
        <div class="sm-banner">
          {{breadcrumbVal.name}}
        </div>

        <el-tabs class="tabs-box"  v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="大数据开发套件A" name="one">

            <div class="introduce">
              <p>
                为了给深圳各区、各委办局用户提供集约化的大数据开发及服务能力，充分适应各用户的实际需求，将会不断引入多样化的工具和服务，同时，平台也支持各区、各委办局用户在大数据平台发布自己的优秀工具，供其他用户订阅使用，使大数据平台真正成为生态化的平台，持续焕发活力。
              </p>
              <router-link :to="{name : 'message'}">申请此套件</router-link>
            </div>

            <ul class="list-view">
              <li>
                <img src="@/assets/img/shop/icon1.png" alt="产品图标">

                <div>
                  <h3>数据汇聚工具</h3>
                  <p>提供丰富的采集汇聚能力，实现多源异构、跨部门、跨系统的离线数据采集以及实时数据采集能力支撑。</p>

                  <span>更新时间：2021-06-18</span>
                  <span>发布时间：2021-08-01</span>

                  <router-link class="more" to="/">查看详情 <i class="el-icon-right"></i></router-link>
                </div>
              </li>

              <li>
                <img src="@/assets/img/shop/icon2.png" alt="产品图标">

                <div>
                  <h3>数据治理工具</h3>
                  <p>对获取的各类数据资源进行数据标准化、原数据管理、监测数据治理、建立数据血缘关系，协同数据开发，建立数据安全管理规范</p>

                  <span>更新时间：2021-06-18</span>
                  <span>发布时间：2021-08-01</span>

                  <router-link class="more" to="/">查看详情 <i class="el-icon-right"></i></router-link>
                </div>
              </li>

              <li>
                <img src="@/assets/img/shop/icon1.png" alt="产品图标">

                <div>
                  <h3>数据开发工具</h3>
                  <p>对完成治理的各种数据资源进行融合、合并、开发。</p>

                  <span>更新时间：2021-06-18</span>
                  <span>发布时间：2021-08-01</span>

                  <router-link class="more" to="/">查看详情 <i class="el-icon-right"></i></router-link>
                </div>
              </li>

              <li>
                <img src="@/assets/img/shop/icon1.png" alt="产品图标">

                <div>
                  <h3>数据开放工具</h3>
                  <p>提供库表、API等形式的数据开放支撑。</p>

                  <span>更新时间：2021-06-18</span>
                  <span>发布时间：2021-08-01</span>

                  <router-link class="more" to="/">查看详情 <i class="el-icon-right"></i></router-link>
                </div>
              </li>

              <li>
                <img src="@/assets/img/shop/icon1.png" alt="产品图标">

                <div>
                  <h3>数据分析与可视化工具</h3>
                  <p>提供简单的拖拽和可视化的操作、丰富的组件和个性化支持，实现各种场景报表需求。</p>

                  <span>更新时间：2021-06-18</span>
                  <span>发布时间：2021-08-01</span>

                  <router-link class="more" to="/">查看详情 <i class="el-icon-right"></i></router-link>
                </div>
              </li>
            </ul>

          </el-tab-pane>

        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data () {
    return {
      breadcrumbData : [{
        name : '工具服务超市'
      },{
        name : '数据服务超市'
      },{
        name : '应用服务超市'
      }],

      breadcrumbVal : {
        name : '工具服务超市'
      },

      activeName: 'one'
    }
  },
  watch:{
    // 处理是否为首页展示状态切换
    '$route.query':{
      handler(newV,oldV){
        this.breadcrumbVal = this.breadcrumbData[newV.type -1]
      },
      immediate:true
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
}
</script>

<style scoped lang="scss">
.news-box{
  margin-bottom: 80px;
}
.breadcrumb{
  margin: 24px 0;
}

.tabs-box{
  ::v-deep .el-tabs__item{
    font-size: 18px;
  }
}
.details-box{
  overflow: hidden;
  .sm-banner{
    height: 120px;
    line-height: 120px;
    font-size: 32px;
    text-indent: 32px;
    margin: 10px 0 20px;
    color: #fff;
    background: url('~@/assets/img/shop/sm-banner.png')no-repeat;
    background-size: cover;
    background-position: bottom;
  }

  .introduce{
    margin: 10px 0 24px;
    padding: 24px;
    height: 100px;
    background: rgba(242, 247, 255, 0.98);
    display: flex;
    p{
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      line-height: 26px;
      flex: 1;
    }
    a{
      flex: 0 0 110px;
      margin-left: 30px;
      display: inline-block;
      float: right;
      padding: 18px 15px;
      color: #fff;
      background: #1072E0;
    }
  }


  .list-view{
    li{
      display: flex;
      margin-bottom: 24px;
    }
    img{
      width: 96px;
      height: 96px;
      flex: 0 0 96px;
      margin-right: 24px;
    }
    div{
      flex: 1;
      position: relative;
      padding-bottom: 22px;
      border-bottom: 1px solid #EEEEEE;
      h3{
        font-size: 20px;
        font-weight: 500;
        color: rgba(17, 17, 17, 0.9);
        line-height: 20px;
      }
    }

    p{
      font-size: 16px;
      margin: 18px 0;
      font-weight: 400;
      color: #666666;
      line-height: 24px;
    }
    span{
      display: inline-block;
      font-size: 16px;
      font-weight: 400;
      color: #999999;
      line-height: 16px;
      margin-right: 32px;
    }

    .more{
      position: absolute;
      top: 25px;
      right: 0;
      padding: 8px 16px;
      height: 40px;
      font-size: 16px;
      font-weight: 400;
      color: #1072E0;
      line-height: 24px;
      border: 1px solid #1072E0;
    }
  }
}
</style>
